PimpMyGraph : plotly pie chart

Je ne sais pas vous mais, parfois, quand je commence un projet, certains éléments m'apparaissent comme une évidence des le départ.

Quand j'ai rejoins l'équipe de Codecarbon et qu'on m'a demandé de réflechir à un nouveau dashboard, j'ai su que je voulais faire cet élément :
codecarbonpiecharts

C'est à dire une série de doughnut charts qui me serviraient de support pour afficher le poids d'un projet particulier dans l'organisation et qui reprennaient le thème du logo CodeCarbon :

codecarbon logo

Cette idée en apparence simple m'a posé quelques défis de réalisation.

Alors comment customiser un 'camembert' avec plotly ? c'est parti

Librairies et dataset

Ici je ne vais utiliser que les graph_objects car c'est la méthode la plus flexible pour customiser des graphiques

J'ai téléchargé une partie des données en base sur le projets Codecarbon sous forme de csv pour les besoins des tests. Donc ce n'est pas exactement ce que l'on a quand on utlise Codecarbon en local sur son ordi, ne soyez pas surpris.

De manière arbitraire, je choisis ici de travailler sur le premier projet de la liste. Dans le dashbord évidemment, on peut choisir son projet.

let's graph

La figure de base du pie chart avec plotly est très simple. Elle n'a besoin que d'une liste de valeurs.

Ici values va recevoir une liste contenant les emissions émises par le projet et la difference entre le total des émissions émises par l'organisation et les émissions émises par le projet.

Comme je ne luis ai pas spécifier de nom pour les éléments de la liste, plotly va les nommer selon leur position dans la liste.

L'une des principales force de plotly est de faire des graph interactifs.
On a donc ici un hover et des label qui s'affiche pour indiquer le pourcentage représenté par chacune des catégories.

Ici cependant je n'en veux pas donc j'applique textinfo = 'none' pour supprimer les labels et hoverinfo='skip pour supprimer les infobulles

Ensuite je vais dessiner un joli trou dans mon pie chart et ajouter un titre au centre

On va appliquer les couleurs du thème.
Vous noterez que marker reçoit un dictionnaire contenant les couleurs que je souhaite utilisé. Je trouve que ce n'est pas toujours facile de savoir comment sont rangés les différents éléments qui le composent marker alors voici un lien vers la documentation https://plotly.com/python/marker-style/

Jusqu'ici, tout va bien.
L'un des problèmes que j'ai rencontré est sur le titre. Il est un peu perdu au milieu de son grand cercle.
Je ne voulais pas non plus que la valeur soit au même niveau d'importance que l'unité !

Malheur! dans ce cas précis go.figure n'accepte pas le css inline !

il a fallu ruser!

J'ai gardé le titre pour les unités et je l'ai positionné en bas de mon graphique et j'ai utilisé les annotations pour rentrer la valeur!

tada!

Petit bonus : Dash

Comme vous le voyez sur le dashboard, j'ai 3 pieCharts à la suite. Naturellement, je me suis dit que j'allais placé chaque graphique dans un dbc.card et bien le résultat est très très vilain!

Donc encore une fois j'ai dû ruser et utiliser subplot

Si vous êtes parvenus jusqu'ici BRAVO et merci.

J'espère que ce petit guide pas à pas vous a été utile et qu'il vous a donner des idées pour personnaliser vos graphiques.

Data for good en général et code Carbon en particulier sont toujours à la recherche de bénévoles pour les aider sur leur projet alors si vous êtes intéressés n'hésitez pas à vous présenter sur le slack !

Encore merci d'avoir pris le temps de me lire. Prenez soin de vous!